<script setup lang="tsx">
import { getListApi, getEnumApi } from '@/api/customerFollow/'
import { useEnumeratePicker } from '@/utils'
const { t } = useI18n()
const isExpanded = ref(true)
const togglePanel = () => {
  isExpanded.value = !isExpanded.value
}

// 使用具体类型定义 props
const props = defineProps({
  currentRow: {
    type: Object,
    default: () => null
  },
  operatorOptions: {
    type: Object,
    default: () => null
  }
})

// 定义 dataList 变量
const dataList = ref<any[]>([])
//初始化请求
const initialize = async () => {
  const params = {
    customer_id: props.currentRow.user_id,
    pageIndex: 1,
    pageSize: 500,
    order_type: props.currentRow.isWholesal ? 'wholesale' : 'order',
    order_no: props.currentRow.order_no
  }
  const resp = await getListApi(params)
  dataList.value = resp.data.list || []
}
//获取枚举
const followOptions = ref<Record<string, any>>({})
const getDropDownBoxInfo = async () => {
  const resp = await getEnumApi({ field: 'all' })
  followOptions.value = resp.data
  console.log('followOptions.value', followOptions.value)
}
if (props.currentRow) {
  initialize()
  getDropDownBoxInfo()
}
</script>

<template>
  <el-card shadow="always">
    <div @click="togglePanel" class="header">
      <span>{{ t('order.followList') }}</span>
      <el-icon v-if="isExpanded">
        <el-icon-arrow-down />
      </el-icon>
      <el-icon v-else>
        <el-icon-arrow-right />
      </el-icon>
    </div>
    <el-collapse-transition>
      <div v-show="isExpanded" class="w-full">
        <el-table
          :data="dataList"
          highlight-current-row
          stripe
          border
          :cell-style="{ textAlign: 'center' }"
          :header-cell-style="{ textAlign: 'center' }"
        >
          <el-table-column
            :label="t('follow.follow_method')"
            width="200"
            :show-overflow-tooltip="true"
          >
            <template #default="{ row }">
              {{ useEnumeratePicker(followOptions.follow_method, row.follow_method) }}
            </template>
          </el-table-column>
          <el-table-column
            :label="t('follow.follow_time')"
            prop="follow_time"
            width="200"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('follow.follow_content')"
            min-width="180"
            prop="follow_content"
            :show-overflow-tooltip="true"
          />
        </el-table>
      </div>
    </el-collapse-transition>
  </el-card>
</template>

<style scoped>
.header {
  display: flex;
  height: 40px;
  padding: 0 10px;
  margin-bottom: 10px;
  font-weight: 900;
  cursor: pointer;
  background-color: #f3f3f3;
  border-radius: 5px;
  align-items: center;
  justify-content: space-between;
}
</style>
